<template>
  <ActionSheet v-model="show">
    <div class="filtrate">
      <div class="radio">
        <div class="top flex items-center justify-between">
          <div class="name">指标选择（单选）</div>
          <div class="action flex items-center" @click="resetData()">
            <img :src="resetIcon" width="16px" height="16px" alt="" /> 重置筛选
          </div>
        </div>
        <div class="content-tab">
          <div
            class="tab"
            :class="radioIndex == item.key ? 'activ' : null"
            v-for="item in FilterTypeList"
            :key="item.key"
            @click="radioFn(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer-fiexd">
        <div class="footer flex items-center">
          <button type="button" @click="show = false" class="toolbar__cancel">
            取消
          </button>
          <div class="toolbar__line"></div>
          <button type="button" @click="_confirm" class="toolbar__confirm">
            确定
          </button>
        </div>
      </div>
    </div>
  </ActionSheet>
</template>

<script>
import { ActionSheet } from "vant";
import bus from "@/config/evenrBus";
import DateIcon from "@/assets/icon/date.png";
import resetIcon from "@/assets/workbench/goout/reset.png";

export default {
  components: {
    ActionSheet,
  },
  props: {
    FilterTypeList: {
      type: Array,
    },
    region: {
      type: Boolean,
      default: true,
    },
    storeVue: {
      type: Object,
    },
    activateField: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      show: false,
      radioIndex: null, //指标选择（单选）
      DateIcon,
      resetIcon,
    };
  },
  mounted() {
    if (!this.region) {
      bus.$on("work_singleLocationShowType", (res) => {
        //单个站点
        this.show = res;
        this.getSelectedDataActiv();
      });
    } else {
      bus.$on("work_selectDataFilterShowType", (res) => {
        //全部站点
        this.show = res;
        if (res) {
          this.getSelectedDataActiv();
        }
      });
    }
  },
  methods: {
    getSelectedDataActiv() {
      //回显示数据
      let list = this.$store.state.work[this.storeVue.name];
      if (list._statusType && list._statusType[0]) {
        this.radioIndex = list._statusType[0].key;
      } else {
        this.radioIndex = this.FilterTypeList[this.activateField].key;
      }
    },
    // 指标选择（单选）
    radioFn(item) {
      this.radioIndex = item.key;
    },
    //确定且过滤数据
    _confirm() {
      this.$store.commit(`work/${this.storeVue.commit}`, {
        key: "_statusType",
        value: this.selectDataFilter(this.FilterTypeList, this.radioIndex),
      });
      this.show = false;
      this.$emit("complete");
    },
    selectDataFilter(listData, listIndexs) {
      let filter = [];
      for (var i = 0; i < listData.length; i++) {
        if (listIndexs == listData[i].key) {
          filter.push(listData[i]);
        }
      }
      return filter;
    },
    resetData() {
      this.radioIndex = null;
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}

.filtrate {
  padding: 20px 16px 0 16px;
  .radio {
    .name {
      height: 20px;
      line-height: 20px;
      @include minxi-fontstyle(14px, 500, #333333);
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .action {
      width: 76px;
      height: 20px;
      font-size: 12px;
      font-family: SFPro-RegularItalic, SFPro;
      font-weight: normal;
      color: #1d6fe9;
      line-height: 20px;
    }
    .content-tab {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      .tab {
        width: 104px;
        height: 32px;
        background: #f5f5f5;
        border-radius: 16px;
        @include minxi-fontstyle(12px, 400, #333333);
        line-height: 32px;
        text-align: center;
        margin-right: 6px;
        border: 1px solid #f5f5f5;
        margin-bottom: 12px;
      }
      .tab:nth-child(3n) {
        margin-right: 0;
      }
      .activ {
        font-weight: 600;
        background: rgba(29, 111, 233, 0.1);
        border-radius: 16px;
        border: 1px solid #1d6fe9;
        color: #1d6fe9;
      }
    }
  }
  .footer-fiexd {
    height: calc(50px + env(safe-area-inset-bottom));
    min-height: 50px;
    .footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: calc(50px + env(safe-area-inset-bottom));
      min-height: 50px;
      background: #ffffff;
      box-shadow: 0px -1px 1px 0px #f5f5f5;
      .toolbar__cancel {
        width: 50%;
        height: 100%;
        @include minxi-fontstyle(14px, 500, #666666);
      }
      .toolbar__line {
        width: 1px;
        height: 20px;
        background: #f0f0f0;
      }
      .toolbar__confirm {
        width: 187px;
        height: 100%;
        @include minxi-fontstyle(14px, 500, #1d6fe9);
      }
    }
  }
}
</style>
